<template>
  <div class="login">
    <form action="">
      <p>
        <input type="text" placeholder="昵称" />
      </p>
      <p>
        <input type="text" placeholder="密码" />
      </p>
      <button class="dl" @click="$router.push('/category')">登录</button>
    </form>
    <p class="zhanghao">
      没有账号?请先
      <button class="zc" @click="$router.push('/regester')">注册</button>
    </p>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("https://img2.baidu.com/it/u=935945736,3486792531&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889");
}
form {
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 5px #ccc;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
p {
  display: flex;
}
input {
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid #eee;
  height: 35px;
  padding-left: 10px;
  padding-top: 10px;
  box-sizing: border-box;
}
.dl {
  width: 70px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
  margin-top: 20px;
  color: rgb(190, 136, 55);
  text-align: center;
}
.zhanghao {
  position: absolute;
  left: 40%;
  top: 62%;
}
.zc {
  background-color: rgba(0, 0, 0, 0);
  color: red;
  border: none;
}
</style>
